<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //用watch实现
        //#region 
        /* new Vue({
        	el:'#root',
        	data:{
        		keyWord:'',
        		persons:[
        			{id:'001',name:'马冬梅',age:19,sex:'女'},
        			{id:'002',name:'周冬雨',age:20,sex:'女'},
        			{id:'003',name:'周杰伦',age:21,sex:'男'},
        			{id:'004',name:'温兆伦',age:22,sex:'男'}
        		],
        		filPerons:[]
        	},
        	watch:{
        		keyWord:{
        			immediate:true,
        			handler(val){
        				this.filPerons = this.persons.filter((p)=>{
        					return p.name.indexOf(val) !== -1
        				})
        			}
        		}
        	}
        }) */
        //#endregion

        //用computed实现
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 19,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 20,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 21,
                    sex: '男'
                }, {
                    id: '004',
                    name: '温兆伦',
                    age: 22,
                    sex: '男'
                }]
            },
            computed: {
                filPerons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>

</html>